<template>
  <div>
    <div class="reg-container">
      <h1 class="mui-title">注册</h1>
    </div>
    <div class="mui-content">
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label>账号</label>
          <input
            id="account"
            type="text"
            class="mui-input-clear mui-input"
            v-model="account"
            placeholder="请输入账号"
          />
        </div>
        <div class="mui-input-row">
          <label>密码</label>
          <input
            id="password"
            type="password"
            class="mui-input-clear mui-input"
            v-model="password"
            placeholder="请输入密码"
          />
        </div>
        <div class="mui-input-row">
          <label>确认</label>
          <input
            id="password_confirm"
            type="password"
            class="mui-input-clear mui-input"
            v-model="repassword"
            placeholder="请确认密码"
          />
        </div>
        <div class="mui-input-row">
          <label>邮箱</label>
          <input
            id="email"
            type="email"
            class="mui-input-clear mui-input"
            v-model="mailbox"
            placeholder="请输入邮箱"
          />
        </div>
      </form>
      <div class="mui-content-padded">
        <button id="reg" @click="reg" class="mui-btn mui-btn-block mui-btn-primary">注册</button>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      account: "",
      password: "",
      repassword: "",
      mailbox: ""
    };
  },
  methods: {
    reg() {
      if (this.account.trim().length === 0) {
        Toast({ message: "账号不能为空", duration: 1000 });
      } else if (this.password.trim().length === 0) {
        Toast({ message: "密码不能为空", duration: 1000 });
      } else if (this.repassword != this.password) {
        Toast({ message: "两次输入的密码不一样", duration: 1000 });
      } else if (this.mailbox.trim().length === 0) {
        Toast({ message: "邮箱不能为空", duration: 1000 });
      }else{
         Toast({ message: "注册成功", duration: 500 });
         this.$router.push('/search')
      }
    }
  }
};
</script>

<style scoped>
.reg-container {
  height: 44px;
}
.mui-content {
  background-color: #fff;
}
</style>